<template>
	<uni-popup ref="popup" type="bottom" animation="true" backgroundColor="#fff" borderRadius="20rpx 20rpx 0 0"
	 :safe-area="false" @maskClick="closePopup">
		<view class="popup-content-box" v-if="isNextStep">
			<view class="header-title">
				<text>退款条款及政策</text>
				<uni-icons @click="closePopup" type="close" size="25"></uni-icons>
			</view>
			<view class="content-box">
				<scroll-view scroll-y="true" class="expenses-box">
					<view class="text-box">
						<view class="tips">
							【淡季和平季政策】
						</view>
						<view class="content">
							1、预订旅行产品须支付定金方可确认预订。
						</view>
						<view class="content">
							2、行程开始前15天及以上(不包含出发当天)，可申请无损取消及退款;
						</view>
						<view class="content">
							3、行程开始前8-14天(不包含出发当天)，申请取消需要收取订单金额的10%作为临时取消的损失;
						</view>
						<view class="content">
							4、行程开始前0-7天，申请取消需要收取订单金额的20%作为临时取消的损失；
						</view>
						<view class="content">
							5、行程开始当天，申请取消需要收取订单金额的100%作为临时取消的损失。
						</view>
						<view class="content">
							*适用时间:8月26日-9月13日、9月19日-9月27日、 10月10日-12月28日
						</view>
						<view class="tips">
							【旺季政策】
						</view>
						<view class="content">
							1、预订旅行产品须支付定金方可确认预订。
						</view>
						<view class="content">
							2、行程开始前15天及以上(不包含出发当天)，可申请无损取消及退款;
						</view>
						<view class="content">
							3、行程开始前8-14天(不包含出发当天)，申请取消需要收取订单金额的20%作为临时取消的损失;
						</view>
						<view class="content">
							4、行程开始前0-7天，申请取消需要收取订单金额的30%作为临时取消的损失。
						</view>
						<view class="content">
							5、行程开始当天，申请取消需要收取订单金额的100%作为临时取消的损失。
						</view>
						<view class="content">
							*适用时间:8月15日-8月25日、9月14日-9月18日、 12月29日-12月31日
						</view>
						<view class="tips">
							【节日政策】
						</view>
						<view class="content">
							1、预订旅行产品须支付全款方可确认预订。
						</view>
						<view class="content">
							2、行程开始前20天及以上(不包含出发当天)，可申请无损取消及退款;
						</view>
						<view class="content">
							3、行程开始前15-19天(不包含出发当天)，申请取消需要收取订单金额的30%作为临时取消的损失;
						</view>
						<view class="content">
							4、行程开始前8-14天(不包含出发当天)，申请取消需要收取订单金额的40%作为临时取消的损失;
						</view>
						<view class="content">
							5、行程开始前0-7天，申请取消需要收取订单金额的50%作为临时取消的损失。
						</view>
						<view class="content">
							6、行程开始当天，申请取消需要收取订单金额的100%作为临时取消的损失。
						</view>
						<view class="content">
							*适用时间:国庆节9月28日-10月9日
						</view>
						<view class="content">
							*特别说明:当旅行日期跨不同季节时，取消政策从严执行。
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="footer-button" @click="NextStep">
				<text>下一步</text>
			</view>
		</view>
		<view class="reason-box popup-content-box" v-else>
			<view class="header-title reason-titl">
				<uni-icons @click="backPopup" type="arrow-left" size="25"></uni-icons>
				<text>选择退款原因</text>
				<uni-icons @click="closePopup" type="close" size="25"></uni-icons>
			</view>
			<view class="reason-content-box">
				<radio-group @change="handleChange" class="radio">
					<view v-for="(item, index) in reasons" :key="index" class="radio-item">
						<text class="radio-label">{{ item }}</text>
						<radio :value="item" class="radio-button" color="#000"></radio>
					</view>
				</radio-group>
				<view class="selfIntroduction">
					<text>其他原因</text>
					<textarea placeholder="请填写其他原因(100字内)" maxlength="100" 
					  placeholder-class="placeholderStyle" v-model="RefundReason"></textarea>
				</view>
			</view>
			<view class="footer-button" @click="SubmitRefund">
				<text>提交申请</text>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {ref,defineExpose,watchEffect} from 'vue';
	import { postRefund } from '@/config/API/Orders.js';
	const popup = ref(null);
	const emit = defineEmits();
	const orderId = ref()
	const selectedReason = ref(""); // 选中的退款原因
	const RefundReason = ref(""); // 填写的其他原因
	const isNextStep = ref(true)
	const props = defineProps({
		Id: {
			type: Number,
			default:0
		},
	});
	watchEffect(()=>{
		orderId.value = props.Id
	})
	// 打开弹窗
	const openPopup = () => {
		if (popup.value) {
			emit('openPopup');
			popup.value.open();
		}
	};

	// 关闭弹窗
	const closePopup = () => {
		if (popup.value) {
			emit('closePopup');
			popup.value.close(); 
		}
	};
	
	const NextStep = () =>{
		console.log('退款ID',orderId.value);
		isNextStep.value = false
	}
	const backPopup = () =>{
		isNextStep.value = true
	}
	const reasons = [
	  "描述与实物不符",
	  "缩水/掉色",
	  "少件（含缺少配件）",
	  "假冒伪牌",
	  "发票问题",
	  "卖家发错货",
	];
	
	//选择的退款原因
	const handleChange = (e) => {
		selectedReason.value = e.detail.value;
		console.log("选择的退货原因：", selectedReason.value);
	};
	
	// 提交退款申请
	const SubmitRefund = async() =>{
		if (!selectedReason.value && !RefundReason.value.trim()) {
			// 校验未选择原因也未填写其他原因
			uni.showToast({
				title: "请选择退款原因或填写其他原因",
				icon: "none",
				duration: 2000
			});
			return;
		}
		if(orderId.value){
			const RefundForm ={
				order_id:parseInt(orderId.value),
				reason: selectedReason.value || RefundReason.value
			}
			emit('SubmitRefund',RefundForm);
			closePopup()
			uni.showToast({
				title: '申请成功我们将在三个工作日内退回费用',
				icon: 'none',
				duration: 2500
			});
		}
	}
	// 向父组件暴露的方法
	defineExpose({
		openPopup,
		closePopup
	});
</script>

<style lang="scss" scoped>
	.popup-content-box {
		width: 100%;
		height: 80vh;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: 60rpx;
		.header-title{
			padding: 0rpx 0 20rpx 0;
			border-bottom: 2rpx solid #f5f6f7;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			text{
				display: block;
				width: calc(100% - 100rpx);
				height: 100%;
				font-size: 30rpx;
				text-align: center;
				font-weight: 600;
			}
		}
		.content-box{
			width: 100%;
			height: 70vh;
			padding-bottom: 30rpx;
			box-sizing: border-box;
			.expenses-box {
				height: 70vh;
				width: 100%;
				padding: 24rpx 24rpx 115rpx;
				box-sizing: border-box;
				.text-box {
					width: 100%;
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					.title {
						width: 100%;
						font-size: 34rpx;
						font-weight: 600;
						color: rgba(0, 0, 0, 1);
					}
					.content {
						width: 100%;
						padding: 0 10rpx;
						box-sizing: border-box;
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(138, 138, 138, 1);
						display: flex;
						justify-content: space-between;
					}
					.tips {
						width: 100%;
						padding: 0 10rpx;
						box-sizing: border-box;
						font-size: 26rpx;
						font-weight: 600;
						color: rgba(138, 138, 138, 1);
					}
				}
			}
		}
		.footer-button{ 
			width: 80vw;
			height: 80rpx;
			position: absolute;
			bottom: 60rpx;
			left: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #000;
			border-radius: 60rpx;
			transform: translate(-50%, 0%);
			text{
				font-size: 26rpx;
				color: #fff;
			}
		}
	}
	.reason-box{
		width: 100%;
		height: 80vh;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: 60rpx;
		.reason-titl{
			padding: 0rpx 0 20rpx 0;
			border-bottom: 2rpx solid #f5f6f7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text{
				font-size: 30rpx;
				text-align: center;
				font-weight: 600;
			}
		}
		.reason-content-box{
			padding: 30rpx;
			box-sizing: border-box;
			.radio{
				width: 100%;
				display: flex;
				gap: 26rpx;
				flex-direction: column;
				.radio-item {
					display: flex;
					align-items: center;
					justify-content: space-between; 
					.radio-label {
						font-size: 28rpx;
						color: #333;
					}
					.radio-button {
						transform:scale(0.9)
					}
				}
			}			
			.selfIntroduction {
				width: 100%;
				display: flex;
				flex-direction: column;
				textarea {
					margin: 0 auto;
					width: 85vw;
					height: 250rpx;
					background: #F1F1F1;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					padding: 24rpx;
					box-sizing: border-box;
					font-weight: 400;
					font-size: 28rpx;
				}
				text {
					width: 100%;
					margin: 30rpx 0 20rpx;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}

</style>
<style scoped>
	/deep/.placeholderStyle {
		font-family: Lantinghei SC, Lantinghei SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #8d8d8d;
		text-align: left;
		font-style: normal;
		text-transform: none;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>